<template>
<ul class="fun2-list-mod">
	<li class="fun2-list-item" v-for='item in data'>
		<van-icon class="fun2-icon" :name="item.icon" />
		<div class="fun2-title">{{item.title}}</div>
		<div class="fun2-tips">{{item.tips}}</div>
	</li>
</ul>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
defineProps({
	data: {
		type: Array,
		required: true,
	}
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fun2-list-mod{ display: flex; flex-wrap: wrap; background-color: #FFF; padding: 0.08rem 0;}
.fun2-list-mod .fun2-list-item{ width: 25%; text-align: center; white-space: nowrap; padding-top: 0.04rem;}
.fun2-list-mod .fun2-icon{ font-size: 0.24rem; color: #973800;}
.fun2-list-mod .fun2-title{ margin-top: 0.04rem; font-size: 0.14rem; line-height: 0.14rem; }
.fun2-list-mod .fun2-tips{ height: 0.12rem; line-height: 0.12rem; font-size: 12px; transform: scale(0.8); color: #f81818;}
</style>
